<!-- eslint-disable vue/no-mutating-props -->
<script lang="ts" setup>
import lodash from 'lodash'
import { Common } from '~/common'
import { OrderModel } from '~/model/OrderModel'
import { OrderItemModel } from '~/model/OrderItemModel'
import { MaterialModel } from '~/model/MaterialModel'

const props = withDefaults(defineProps<{
  order: OrderModel
  header?: boolean
  color?: string
  amountHide?: boolean
}>(), {
  editable: false,
  header: false,
  amountHide: false,
})

const imgSrc = ref(null as any)

const totalAmount = computed(() => {
  const { order } = props
  if (!order)
    return 0
  return Common.totalAmount(order)
})

function nameSpecification(oim: OrderItemModel): string {
  if (!oim.material) {
    return ''
  }
  let s = oim.material.name
  if (!['', '-', undefined].includes(oim.material?.specification)) {
    s = `${s}(${oim.material.specification})`
  }
  return s
}

const orderDisp = computed(() => {
  // 添加运费和总计
  if (
    props.order
    && props.order.needDelivery
    && props.order.fare > 0
    && !props.order.items.find(x => x.material?.name === '运费')
  ) {
    const _order = lodash.cloneDeep(props.order)
    const material = new MaterialModel()
    material.name = '运费'
    const orderItem = new OrderItemModel()
    orderItem.material = material
    orderItem.quantity = 1
    orderItem.unitPrice = _order.fare
    orderItem.amount = _order.fare
    _order.items.push(orderItem)
    return _order
  }
  else {
    return props.order
  }
})
</script>

<template>
  <div v-if="orderDisp" ref="imgSrc" mb paper of-hidden p0>
    <table v-if="header" class="lx-table lx-table-large">
      <thead>
        <tr
          :style="{
            backgroundColor: color ? color : '#6b7280',
            color: 'white',
          }"
        >
          <td>{{ order.consumer?.name }}</td>
          <td colspan="2">
            {{ Common.timeFormat(order.date) }}
          </td>
          <td>第 {{ order.batch }} 单</td>
        </tr>
      </thead>
      <!-- <div>{{ order.consumer?.name }}</div>
      <div>{{ Common.timeFormat(order.date) }}</div>
      <div>第 {{ order.batch }} 单</div> -->
    </table>

    <table class="lx-table lx-table-large">
      <thead>
        <tr
          :style="{
            backgroundColor: color ? color : '#6b7280',
            color: 'white',
          }"
        >
          <td>产品名称</td>
          <td text-right>
            数量
          </td>
          <td v-if="!amountHide" text-right>
            单价
          </td>
          <td v-if="!amountHide">
            金额
          </td>
          <td v-if="amountHide">
            备注
          </td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in orderDisp.items" :key="index">
          <td>
            {{ nameSpecification(item) }}
          </td>
          <td text-right>
            {{ item.quantity }}
          </td>
          <td v-if="!amountHide" text-right>
            {{ item.unitPrice }}
          </td>
          <td v-if="!amountHide">
            {{ item.amount }}
          </td>
          <td v-if="amountHide">
            {{ item.material?.comment }}
          </td>
        </tr>
      </tbody>
    </table>

    <table
      v-if="!amountHide" class="lx-table lx-table-large"
    >
      <tr
        :style="{
          backgroundColor: color ? color : '#6b7280',
          color: 'white',
        }"
      >
        <td colspan="3" w="80%" flex-1 text-center>
          总计
        </td>
        <td colspan="1">
          {{ totalAmount }}
        </td>
      </tr>
      <tr />
    </table>
  </div>
</template>

<style scoped>

</style>
